<template>
    <div class="frame">
        <Demo title="方法一" class="bg">
            <div class="demo1"></div>
            <span>设置border的right和bottom，然后旋转45°</span>
        </Demo>
        <Demo title="方法二" class="bg">
            <div class="demo2"></div>
            <span>通过border的宽度和颜色设置三角形</span>
        </Demo>
        <Demo title="方法三" class="bg">
            <div class="demo3"></div>
            <span>线性渐变固定两种颜色</span>
        </Demo>
        <Demo title="方法四" class="bg">
            <div class="demo4"></div>
            <span style="z-index: 100;">transform: rotate 配合 overflow: hidden</span>
        </Demo>
        <Demo title="方法五" class="bg">
            <div class="demo5"></div>
            <span>使用 clip-path 绘制三角形</span>
        </Demo>
    </div>
</template>

<script setup lang="ts">
import Demo from './demo.vue';
</script>

<style scoped lang="scss">
.frame {
    height: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.bg {
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: skyblue;
    margin: 100px;
    flex-basis: calc(33% - 200px);
}

.demo1 {
    width: 15px;
    height: 15px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: rotate(45deg);
}

.demo2 {
    width: 0;
    height: 0;
    border-top: 50px solid pink;
    border-right: 50px solid darkseagreen;
    border-bottom: 50px solid blue;
    border-left: 50px solid green;
}

.demo3 {
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}

.demo4 {
    width: 141px;
    height: 100px;
    position: relative;
    // overflow: hidden;
    border: 1px solid #000;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: deeppink;
        transform-origin: left bottom;
        transform: rotate(45deg);
    }
}

.demo5 {
    width: 100px;
    height: 100px;
    background: deeppink;
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
</style>